<template>
  <div class="container">
    <!-- 页头 -->
    <div class="header padding-24 space-between">
      <div class="h-back" @click="goBack">
        <img :src="back" alt />
      </div>
      <div class="title fs-36">{{title}}</div>
      <div class="h-right">
        <img :src="play" alt />
      </div>
    </div>

    <!-- 票务/商城分类 -->
    <div class="box">
      <div class="title">
        <div class="ticketing" :class="{selection: status == 1}" @click="toWhere(1)">
          <div>票务</div>
          <div class="line" :class="{selection: status == 1}"></div>
        </div>
        <div class="mall" :class="{selection: status == 2}" @click="toWhere(2)">
          <div>商城</div>
          <div class="line" :class="{selection: status == 2}"></div>
        </div>
      </div>
      <div class="content" v-if="status == 1">
        <div class="coupon" v-for="item in ticketingList" :key="item.id">
          <div class="name">
            <div class="left">
              <p>立减</p>
              <p>{{ item.discount }}</p>
            </div>
            <div class="right">
              <p>{{ item.name }}</p>
              <p>
                {{ item.time }}
                <span v-show="item.is_use == 0" class="receive">领取</span>
                <span v-show="item.is_use == 1" class="received">已领取</span>
              </p>
            </div>
          </div>
          <div class="tips">{{ item.tips }}</div>
        </div>

        <div class="commodity" v-if="status == 2"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "welfare",
  data() {
    return {
      isBack: true,
      title: "我的福利券",
      back: require("../../assets/index/back-pic.png"),
      play: require("../../assets/public/musicbar.png"),
      status: 1,
      ticketingList: [
        {
          name: "波波食府麻辣香锅",
          discount: "10%",
          time: "2019.02.23-2019.03.12",
          tips: "满30元可用",
          is_use: 1
        },
        {
          name: "夏家臭豆腐",
          discount: "30%",
          time: "2019.02.23-2019.03.12",
          tips: "满50元可用",
          is_use: 0
        },
        {
          name: "阿里烧烤",
          discount: "40%",
          time: "2019.02.23-2019.03.12",
          tips: "仅尾号1001手机可用",
          is_use: 1
        }
      ]
    };
  },

  methods: {
    goBack() {
      this.$router.go(-1);
    },

    toWhere(status) {
      this.status = status;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 1rem 0 0 0;

  .header {
    background-color: #f8f8f8;
    width: 100%;
    height: 1rem;

    .h-back {
      width: 0.15rem;
      height: 0.26rem;

      img {
        transform: rotate(180deg);
        width: 100%;
      }
    }

    .title {
      font-size: 0.36rem;
      font-weight: bold;
    }

    .h-right {
      width: 0.38rem;
      height: 0.5rem;

      img {
        display: inline-block;
        width: 100%;
      }
    }

    .h-share {
      position: absolute;
      right: 1rem;
      width: 0.45rem;
      height: 0.43rem;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .box {
    .title {
      height: 0.88rem;
      // line-height: 0.88rem;
      font-size: 0.32rem;
      display: flex;
      justify-content: space-between;
      padding: 0 1.8rem;
      background-color: #fff;

      > div {
        width: 50%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        .line {
          width: 0.4rem;
          height: 0.06rem;
          margin: 0 auto;
          border-radius: 0.03rem;
          margin-top: 0.18rem;
        }

        .selection {
          background: rgba(84, 4, 121, 1);
        }
      }

      .selection {
        color: rgba(84, 4, 121, 1);
        font-weight: bold;
      }
    }

    .content {
      .coupon {
        height: 2.86rem;
        background: rgba(255, 255, 255, 1);
        margin-top: 0.24rem;

        .name {
          height: 1.55rem;
          border-bottom: 0.015rem solid #e9e9e9;
          display: flex;
          justify-content: space-between;

          .left {
            width: 1.97rem;
            height: 100%;
            border-right: 0.015rem solid #e9e9e9;
            color: rgba(244, 67, 73, 1);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            p:first-child {
              font-size: 0.32rem;
            }

            p:last-child {
              font-size: 0.48rem;
            }
          }

          .right {
            width: 5.52rem;
            height: 100%;
            padding: 0.24rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            box-sizing: border-box;

            p:first-child {
              font-size: 0.32rem;
            }

            p:last-child {
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 0.26rem;
              color: rgba(153, 153, 153, 1);
            }

            .receive,
            .received {
              display: inline-block;
              width: 1.32rem;
              height: 0.5rem;
              line-height: 0.5rem;
              font-size: 0.28rem;
              color: rgba(244, 67, 73, 1);
              border: 0.015rem solid rgba(244, 67, 73, 1);
              border-radius: 0.25rem;
              text-align: center;
            }
            .received {
              color: #999;
              border: 0.015rem solid #999;
            }
          }
        }

        .tips {
          height: 1.3rem;
          padding: 0.31rem;
          font-size: 0.28rem;
          color: rgba(102, 102, 102, 1);
        }
      }
    }
  }
}
</style>